{extend name="base" /}
{block name="head"}
<meta name="description" content="">
<meta name="keywords" content="">
<title>模拟赛场</title>
{/block}
{block name="css"}
{css file="/static/css/public/pagination.css"}
{css file="/static/css/match/matchs.css"}
{/block}
{block name="header"}{include file="public/header" /}{/block}
{block name="main"}
<div class="am-container" id="matchs">
    <div class="am-g">
        <div class="am-u-md-12">
            <div class="am-margin-bottom am-text-center">
                <a :href="match_banner.url" target="_blank" :title="match_banner.title">
                <img :src="match_banner.image" :alt="match_banner.title" class="am-img-responsive"></a>
            </div>
            <div class="am-list-news-bd tr-list">
                <ul class="am-list">
                    <li class="am-g tr-list-li" v-for="item in matchList">
                        <div class="am-u-lg-10 tr-list-main">
                            <div class="am-u-md-3 am-padding-horizontal-sm am-list-thumb am-text-center">
                                <a :href="'{:url('index/macthUser')}?id='+item.id" :title="item.name"><img :src="item.image" alt=":item.name" width="100%" /></a>
                            </div>
                            <div class="am-u-md-7 am-list-main am-padding-left am-margin-top-sm">
                                <div class="am-u-md-12">
                                    <label>比赛名称：</label><a :href="'{:url('index/macthUser')}?id='+item.id" :title="item.name" class="tr-simulation-name"><span>{{ item.name }}</span></a>
                                </div>
                                <div class="am-u-md-12">
                                    <label>比赛时间：</label><span>{{ item.start_date }} ~ {{ item.end_date }}</span>
                                </div>
                                <div class="am-u-md-12">
                                    <template v-if="item.joined == 1">
                                    <label>我在比赛中的排名：</label><span>{{ item.ranking }}名</span>
                                    </template>
                                </div>
                            </div>
                            <div class="am-u-md-2 am-padding-left tr-status-div">
                                <span :class="'tr-status'+item.status_class">{{ item.status_name }}</span>
                            </div>
                        </div>
                        <div class="am-u-lg-2 am-list-main am-text-center tr-list-button">
                            <template v-if="(item.status == 1 || item.status == 2) && item.joined == 0">
                                <template v-if="logined">
                                        <a href="javascript:;" :href-url="'{:url('index/macthUser')}?id='+item.id" class="am-btn am-btn-danger am-btn-lg" :id="item.id" v-on:click="join_match">参加比赛</a>
                                </template>
                                <template v-else>
                                        <a href="{:url('index/login')}" class="am-btn am-btn-danger am-btn-lg" target="_blank">参加比赛</a>
                                </template>
                            </template>
                            <template v-else>
                                <a :href="'{:url('index/macthUser')}?id='+item.id" class="am-btn am-btn-primary am-btn-lg">查看比赛</a>
                            </template>
                        </div>
                    </li>
                </ul>
            </div>    
            <div class="pages am-text-center">
                <match-page :cur.sync="match_page.page" :all.sync="match_page.page_total" v-on:btn-click="updateMatchs"></match-page>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="footer"}
    {include file="public/footer" /}
    {include file="public/modal" /}
{/block} 
{block name="js"} 
    {js href="/static/js/public/modal.js"}
    {css href="/static/css/public/pagination.css" /}
    {js href="/static/js/widget/page.js" /}
    {js href="/static/js/match/matchs.js" /}
{/block}
